<template>
	<view class="feedback">
		<view class="user">
			<image :src="user.avatar" class="avatar"></image>
			<text class="nickname">{{ user.nickname }}</text>
		</view>
		<view class="input-box">
			<textarea v-model="inputValue" placeholder="请在这里输入您的建议和反馈"></textarea>
		</view>
		<view class="submit-box">
			<button @click="handleSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					avatar: '用户头像',
					nickname: '用户昵称',
				},
				inputValue: '',
			}
		},
		methods: {
			handleSubmit() {
				// 处理提交逻辑，例如发送请求将建议和反馈内容保存到后台数据库
			},
		},
	}
</script>

<style>
	.feedback {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50px;
	}

	.user {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.nickname {
		font-size: 18px;
	}

	.input-box {
		width: 90%;
		height: 200px;
		margin-bottom: 20px;
		border: 1px solid #ccc;
		border-radius: 10px;
		padding: 10px;
	}

	textarea {
		width: 100%;
		height: 100%;
		border: none;
		resize: none;
		font-size: 16px;
		line-height: 1.5;
	}

	.submit-box {
		width: 90%;
		display: flex;
		justify-content: flex-end;
	}

	button {
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 10px 20px;
		font-size: 16px;
		cursor: pointer;
	}
	
</style>